import { defineComponent } from 'vue';
import './index.less';
import { ActionSheet } from 'vant';

export default defineComponent({
  name: 'ItemDetail',
  props: ['item'],
  setup(props, { expose }) {
    const detailInfo = reactive({
      show: false,
      list: [],
      header: {}
    }) as AnyObject;

    const colors = new Map([
      ['完成超期', '#d43030'],
      ['延期进行', '#d43030'],
      ['按时完成', '#00b87a'],
      ['正常进行', '#2a82e4']
    ]);

    const viewLiDetail = (item: AnyObject) => {
      detailInfo.show = true;
      detailInfo.header = {
        title: item.name,
        status: item.over_time
      };
      detailInfo.list = [
        { name: '项目编码', content: item.code },
        { name: '项目经理', content: item.project_name },
        { name: '产品经理', content: item.product_name },
        { name: '项目', content: item.project },
        { name: '项目名称', content: item.name },
        { name: '计划立项日期', content: item.create_time },
        { name: '当前节点', content: item.node },
        { name: '计划时间', content: item.plan_time },
        { name: '是否超期', content: item.over_time },
        { name: '进展完成率', content: item.finish_rate },
        { name: '已完成节点超期率', content: item.node_rate },
        { name: '项目进行天数', content: item.day },
        { name: '计划进度', content: item.pace },
        { name: '项目延期率', content: item.delay_rate },
        { name: '规范用时', content: item.norm_time },
        { name: '是否规范完成', content: item.is_norm }
      ];
    };
    expose({ viewLiDetail });

    return () => (
      <ActionSheet
        v-model:show={detailInfo.show}
        title="项目详情"
        class="detailinfo"
      >
        <div class="detailinfo_header flex-between">
          <div class="title">{detailInfo.header.title}</div>
          <div
            style={{ color: colors.get(detailInfo.header.status) }}
            class="status"
          >
            {detailInfo.header.status}
          </div>
        </div>
        <ul class="detailinfo_content">
          {detailInfo.list.map((item: AnyObject) => (
            <li class="flex-start">
              <div class="title">{item.name}</div>
              <div class="content">{item.content}</div>
            </li>
          ))}
        </ul>
      </ActionSheet>
    );
  }
});
